import React, { useEffect, useState } from "react";
import { Card, Descriptions, Button } from 'antd';
import { getHosListDetaRequest } from "@/api/hospital/hospitalList";
import { useNavigate, useParams } from "react-router-dom";
import {
  hosDetailReturnType,
  hospitalListItemsType,
  BookingRuleType
} from "@/api/hospital/model/hospitalListType";

export default function HospitalShow() {
  // 这里使用useParams解构得到传过来的id参数
  const { id } = useParams()
  // 
  const navigate=useNavigate()
  // 定义一个保存医院详细信息的State状态
  // 这里保存的医院详细信息需要进行数据判断,就是我们设置的医院详细信息返回值的类型
  const [detail, setDetail] = useState<hosDetailReturnType>({})

  useEffect(() => {
    const getHosListDetaHandle = async () => {
      const result = await getHosListDetaRequest(id as string)
      console.log(result);
      setDetail(result)
    }
    getHosListDetaHandle()
  }, [])

  
  // 1.点击返回的事件函数,返回上一页
  const goBackHandle=()=>{
    navigate(-1)
  }


  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {(detail.hospital as hospitalListItemsType)?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {/* 这里是三元运算表达式,有图片则加载,没图片则为空,这是为了解决一开始图片未加载的时候的提示警告 */}
          {(detail.hospital as hospitalListItemsType)?.logoData ? (
            <img width={100}
              src={`data:image/jpeg;base64,${(detail.hospital as hospitalListItemsType)?.logoData
                }`}
              alt=""
            />
          ) : ("")
          }
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {(detail.hospital as hospitalListItemsType)?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {(detail.hospital as hospitalListItemsType)?.param?.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="医院坐车路线" span={2}>
          {(detail.hospital as hospitalListItemsType)?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {(detail.hospital as hospitalListItemsType)?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: "30px" }}
      >
        <Descriptions.Item label="预约周期">
          {(detail.bookingRule as BookingRuleType)?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {(detail.bookingRule as BookingRuleType)?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {" "}
          {(detail.bookingRule as BookingRuleType)?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {" "}
          {(detail.bookingRule as BookingRuleType)?.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {(detail.bookingRule as BookingRuleType)?.rule.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </Descriptions.Item>
      </Descriptions>

      <Button style={{ marginTop: "30px" }} onClick={goBackHandle}>返回</Button>
    </Card>
  )
}
